<template>
    <div class="home viewer">
        <vc-viewer ref="viewerRef" :info-box="false" :show-credit="false" :selectionIndicator="true" :scene3DOnly="true"
            @ready="onViewerReady" @leftClick="onLeftClick">
            <vc-layer-imagery>
                <!-- 天地图 -->
                <vc-imagery-provider-tianditu token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
            </vc-layer-imagery>
            <!-- 3DTile元素 -->
            <tileset-element />
        </vc-viewer>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { VcReadyObject } from 'vue-cesium/es/utils/types'
import TilesetElement from '@/components/TilesetElement/index.vue';

let viewer = ref(null)

const onViewerReady = (readyObj: VcReadyObject) => {
    viewer.value = readyObj.viewer
}

// 鼠标左键单击事件
const onLeftClick = (e: any) => {
    if (!viewer.value) {
        return;
    }
    const feature = viewer.value.scene.pick(e.position);
    // 触发 properties 上定义的 onClick 事件
    if (feature?.id?.properties.onClick) {
        feature.id.properties.onClick._value();
    }
}

</script>

<style scoped>
.viewer {
    height: 100vh;
    width: 100%;
}
</style>
